<template>
    <div>
        <div style="margin-bottom: 20px">
            <!-- prefix 前置图标-->
            <el-input v-model="data.input" style="width: 240px" placeholder="Please input" :prefix-icon="Search" /> {{
                data.input }}
            <!-- suffix后置图标 -->
            <el-input style="width: 200px" :suffix-icon="Calendar"></el-input>
            <el-input type="textarea" v-model="data.descr" style="width: 200px"></el-input>

        </div>

        <div style="margin: 20px 0">

            <!-- clearable 清空复选框-->
            <el-select v-model="data.value" clearable multiple placeholder="请选择季节" style="width: 240px">
                <!-- vfor 循环展示下拉框选项-->
                <!-- for循环key必须绑定唯一的 例如ID  -->
                <el-option v-for="item in data.options" :key="item" :label="item" :value="item" />
            </el-select>
        </div>

        <div style="margin: 20px 0">
            <el-radio-group v-model="data.sex">
                <el-radio value="男">男</el-radio>
                <el-radio label="女">女</el-radio>
            </el-radio-group>
        </div>
    </div>
</template>

<script setup>
//需要导入
import { reactive } from 'vue';
//图标都需要导入
import { Calendar, Search } from '@element-plus/icons-vue' 

//声明绑定的模块
const data = reactive({

    input: null,
    descr: '11111133343423423432432423423423423423432432423523523hbdfbewhygysegibfiuafiafiusgiughiusdgiusdghsdiughiusegiudsggdbf',
    value: '',
    options: ['春天', '夏天', '秋天'],
    sex: '男'
})

</script>